<template>
  <div class="back">
    <video src="../../public/search/back3.mp4" class="bjimg" autoplay loop muted></video>
     <!--使用视频当做背景-->
    <div class="search-main">
      <!--搜索框部分-->
      <div style="text-align: center">
        <h1>程序员专用搜索主页</h1>
      </div>
        <!--基于bing的搜索框-->
      <form action="https://cn.bing.com/search" target="_self" method="get"  >
        <input type="text" id="search-input" name="q" placeholder="请输入要搜索的内容：" autofocus>
        <input type="submit" id="search-button" value="">
      </form>
    </div>

<!--    基于swiper的轮播图元素-->
    <div class="about">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div>
              <a href="https://juejin.cn/"><img class="pic" src="../../public/search/pic6.jpg" alt="小破站"></a>
              <a href="https://github.com/"><img class="pic" src="../../public/search/pic4.jpg" alt="github"></a>
              <a href="https://www.jianshu.com/"><img class="pic" src="../../public/search/pic5.jpg" alt="简书"></a>
            </div>
          </div>
          <div class="swiper-slide">
            <div>
              <a href="https://www.bilibili.com/"><img class="pic" src="../../public/search/pic1.jpg" alt="小破站"></a>
              <a href="https://www.csdn.net/"><img class="pic" src="../../public/search/pic2.jpg" alt="csdn"></a>
              <a href="https://www.cnblogs.com/"><img class="pic" src="../../public/search/pic3.jpg" alt="博客园"></a>
            </div>
          </div>
          <div class="swiper-slide">
            <div>
              <a href="https://www.nowcoder.com/"><img class="pic" src="../../public/search/pic7.jpg" alt="小破站"></a>
              <a href="https://stackoverflow.com/"><img class="pic" src="../../public/search/pic8.jpg" alt="csdn"></a>
              <a href="https://leetcode-cn.com/"><img class="pic" src="../../public/search/pic9.png" alt="博客园"></a>
            </div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
    </div>
<!--插入图片-->
    <div class="messi">
      <img id="messi-king" src="../../public/search/messi.webp" alt="messi">
      <h2 style="opacity: 0.5" id="must">2022 卡塔尔 必定圆梦！！！</h2>
    </div>

  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      activeIndex: '/search'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    to_menu(url) {
      window.open(url, '_blank');
    }
  },
  created() {
  },
  // 引用swiper
  mounted() {
      new Swiper('.swiper-container', {
      loop: true,
      // 分页器
      pagination: '.swiper-pagination',
      // 前进后退按钮
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      // 滚动条
      scrollbar: '.swiper-scrollbar',
      // 自动切换海报
      autoplay:2000,// ms
    })
  }
}
</script>

<style scoped>

.back {
  width: 100%;
  height: 100%;
}/*设置背景图片并调整其大小铺至整个页面*/

h1{
  font-family: "楷体";
  color: red;
  margin-bottom: 20px;
}/*设置字体及其内边距*/

.search-main{
  position: absolute;
  top: 20%;
  width: 100%;
}/*设置搜索框的位置*/

#search-input{
  outline:none;
  width:35%;
  float: left;
  margin: 0 0 0 30%;
  height: 40px;
  line-height: 50px;
  border:0;
  font-size: large;
}/*设置输入框的宽度高度*/

#search-button{
  background: url("../../public/search/big.jpg") no-repeat;
  background-size: 100% auto;
  width:40px;
  height: 40px;
  border:0;
}/*设置搜索按钮的图形样式及大小*/

#search-button:hover{
  transform: scale(1.1);
}/*设置鼠标悬停事件*/


.swiper-container {
  width: 40%;
  height: 45%;
  position: absolute;
  left: 29%;
  top: 38%;
}/*滑动窗口的位置大小*/

.swiper-slide{
  width:100%;
  height: 100%;
  text-align: center;
  line-height: 500px;
}/*设置滑动图片*/
.pic{
  height: 120px;
  border-radius: 50%;
  margin: 0 20px 40px 20px;
}

.pic:hover{
  transform: scale(1.1);
}/*设置鼠标悬停事件*/

/*设置图片位置*/
.messi{
  float: left;
  width: 100%;
  height: 100%;
}
#messi-king{
  float: left;
  height: 35%;
  position: absolute;
  bottom: 5%;
  opacity: 0.4;
  border-radius: 150px;
  border: none;
}/*设置图片*/

#must{
  color: #fff;
  text-shadow:  0 0 10px black;
  position: absolute;
  left: 4%;
  bottom: 0;
}/*字体阴影设置*/

.bjimg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  object-fit: cover;
}/*设置MP4背景*/


</style>
